<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_固定定位</title>
    <style>
        .outer {
            width: 200px;
            background-color: skyblue;
            border: 1px solid black;
            padding: 10px;
        }
        .box {
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
        }
        .box2 {
            background-color: yellow;
            position: fixed;
            bottom: 0px;
            right: 0px;
            /* margin-right: 10px;
            margin-bottom: 200px; */
            float: left;
        }
        .box3 {
            background-color: plum;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <span class="box box2">哥哥需要聊天吗？点我即可</span>
        <div class="box box3">3</div>
    </div>
    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, corporis qui, dolorem distinctio officia pariatur expedita eius aut cum, laboriosam esse recusandae voluptatibus possimus vitae optio. Dicta, laborum atque neque deserunt obcaecati amet in accusamus rem corporis dolorem, qui nobis odio ipsa laudantium officia et, quaerat unde eius! Non ea ullam quos sed sequi, voluptate placeat reiciendis. Autem molestiae aliquid voluptates provident! Sequi ducimus sapiente architecto pariatur aspernatur aperiam, veniam quibusdam repudiandae adipisci repellat! Ex enim, soluta quas, recusandae voluptatem, quae repellat molestias fugit et dolore beatae! Minus, quod deleniti voluptatum eius consequatur provident aliquam quisquam molestias magni debitis voluptatibus minima natus illum atque veritatis at officia eos eum aut ratione? Deserunt doloribus repudiandae, iure laudantium, dolorum dolores quia reiciendis ea voluptate repellat sapiente nobis cumque optio saepe provident aliquid dolorem dicta ut, aspernatur maxime. Molestias dignissimos enim quibusdam minima. Nemo vero ex quasi quisquam. Tenetur est autem perspiciatis culpa eveniet iure dolores repellendus architecto odio dicta itaque tempore fugit dolore dolorum, blanditiis quaerat debitis accusamus modi, esse porro voluptatem vel saepe! Incidunt ab sunt veritatis rem quaerat ut voluptatum esse quas, corporis excepturi, minus alias fuga exercitationem aspernatur ad distinctio adipisci praesentium est ipsam assumenda ipsa. Explicabo illo modi doloremque dicta repellendus necessitatibus placeat quasi blanditiis maxime nihil. Molestias, consequuntur. Quia quam sunt aut accusantium assumenda fugiat, maiores provident hic ducimus ipsa ea, eos tenetur reiciendis libero earum aspernatur! Odio vitae libero porro! Nemo tempore ratione, animi illo dignissimos debitis nulla. Nulla incidunt, recusandae non nemo doloremque optio cupiditate? Deserunt repellat officia quasi saepe tempora consequatur incidunt amet vero architecto ducimus minima aliquam, placeat distinctio aperiam quia sint doloribus dolorem dolores quam a illo rerum blanditiis? Maiores, incidunt ut laudantium aut aspernatur porro mollitia provident iure expedita veniam doloribus quo. Temporibus hic, ducimus voluptatem at iusto rem doloremque. Blanditiis corporis omnis laudantium iure minus ducimus nobis, commodi maiores iste labore ipsam temporibus beatae sit perferendis repudiandae repellat corrupti quaerat quos iusto deleniti laboriosam nulla distinctio aut quibusdam. Pariatur beatae libero accusantium repellat fuga quaerat cumque eveniet officiis dolore? Nemo, similique quae minima dolorem esse quod aliquam recusandae aperiam id, eius, provident expedita. Aliquam natus necessitatibus cum harum praesentium at ea quis quibusdam sit sequi! Et consequatur laboriosam magni aut corrupti mollitia labore expedita. Libero quae quaerat animi aliquid fuga molestias consectetur accusamus velit autem, sunt dolores adipisci suscipit cumque, eos veritatis voluptas magni voluptatibus. Voluptate enim illum et qui. Aperiam, recusandae! Facere illum voluptates quidem expedita, iste aspernatur laborum quo explicabo quibusdam quos non neque. Voluptatum eos harum fugiat odio aliquid unde reiciendis dolore eveniet minima at omnis a officiis laudantium, reprehenderit libero necessitatibus eligendi! Aliquid quaerat impedit provident sed voluptas at, molestias eos voluptate placeat rem exercitationem inventore. Alias culpa velit facilis molestias harum, aspernatur sed nostrum, id esse magnam blanditiis cum explicabo nulla aliquid modi, ipsa ullam? Autem consequatur iste in molestias doloremque magni, labore rerum ea placeat, aliquam accusamus necessitatibus temporibus tempora saepe sequi alias ipsa earum reprehenderit culpa accusantium, laudantium fugit distinctio? Amet, labore repellat officia sunt, quisquam, aspernatur eaque nihil minima deleniti adipisci voluptates maiores illo facere fugit aperiam rerum laboriosam doloribus totam. Assumenda, harum? Cumque, praesentium adipisci? Laudantium assumenda voluptas cumque consectetur excepturi inventore ex aspernatur. Pariatur corporis dicta omnis veritatis eos enim. Cupiditate ratione, vero corporis dolorum, totam incidunt, amet iure fugiat dolor facilis commodi qui temporibus pariatur assumenda. Similique omnis doloribus velit provident illo dolores hic exercitationem natus quisquam eligendi inventore autem, vero recusandae quibusdam atque repellendus nostrum sunt veniam. Ratione quibusdam eius hic laudantium quos, saepe culpa! Assumenda eius, repellendus consectetur ad beatae veritatis neque eaque temporibus provident vero eligendi esse incidunt tempore ut necessitatibus molestiae debitis quod libero doloribus. Molestias eaque aut accusamus obcaecati in fuga culpa quis? Iure eius qui veritatis natus quibusdam totam deserunt excepturi voluptatibus suscipit aperiam debitis quaerat reprehenderit eligendi voluptatem quo, harum sed, repellat voluptas repellendus blanditiis expedita eos fuga alias! Hic, culpa. Ea, totam? Odit nesciunt nihil facere iure, velit modi veritatis deleniti optio esse eius officiis deserunt fugit libero vero sit quis dolorum nobis, sint mollitia. Harum debitis rerum aperiam, cupiditate, ad nostrum veniam repellendus nihil dolorem quo exercitationem officia totam nisi et repudiandae eos quia! Quibusdam nihil quisquam accusamus illo nulla! Deserunt consequatur eligendi sapiente dolorem possimus quam, libero debitis, impedit, sunt labore consequuntur ullam velit. Temporibus ipsum alias, numquam natus, unde eum consectetur ipsam impedit ut voluptate esse recusandae iure eos perferendis autem, obcaecati soluta officia. Ducimus voluptates aperiam tempore! Possimus voluptates itaque quas recusandae consequuntur libero officiis aliquam, laboriosam sapiente nisi repudiandae blanditiis commodi rerum aperiam ad vitae non nam, iste nihil repellat perferendis, reprehenderit inventore tempore. Aspernatur perferendis voluptatum molestiae corrupti beatae quam, libero veniam atque possimus. Non ratione possimus natus ad ipsum sunt autem facilis, nostrum dolores, tempore magni hic cupiditate voluptatem corporis, beatae expedita quibusdam amet. Tempore soluta odio voluptatibus, reprehenderit pariatur in asperiores cupiditate, doloremque dolorum corporis dolores? Beatae itaque rerum sit nobis accusamus voluptas eius distinctio eaque architecto tempore, a at aspernatur aperiam voluptatibus impedit, assumenda vitae ex ipsum repellendus possimus sequi. Sed excepturi laborum error officiis recusandae necessitatibus voluptates temporibus beatae consequatur. Accusamus sint nesciunt perspiciatis magnam deserunt facilis eaque explicabo rem asperiores ipsam? Distinctio, ex eaque sapiente perferendis aspernatur tempora saepe, aperiam quaerat ab molestias voluptate! Id, unde aliquam quo, illo architecto repellendus amet tenetur temporibus similique illum, fugiat quia in! Dicta perspiciatis numquam quod non quaerat autem accusantium atque corporis iste quo. Laborum dolorem saepe temporibus vero dolore esse deleniti? Dolorum ducimus ex temporibus nam nostrum sequi ipsum possimus explicabo, fuga repellat quasi minus harum quis! Neque enim, sapiente nesciunt quas aliquam possimus est molestias corrupti ullam. Id maiores fugiat neque incidunt esse velit repudiandae quis laborum sint ullam corporis consectetur quisquam corrupti in rem cum delectus libero architecto accusamus, quibusdam aspernatur eveniet animi recusandae culpa. Laborum quasi fugiat reiciendis totam, expedita voluptatum veniam quos quo molestiae laudantium! Ducimus voluptatum ullam facere. Nesciunt officiis repellendus animi cumque at ratione fugiat corrupti est, quod quia id aliquid accusamus obcaecati suscipit similique aliquam?</div>
</body>
</html>